<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>花龙腾航 - 机票预订系统</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <style>
    .auth-container {
      background: linear-gradient(135deg, rgba(30, 58, 138, 0.8) 0%, rgba(79, 70, 229, 0.8) 100%);
    }

    .auth-card {
      backdrop-filter: blur(10px);
      background: rgba(255, 255, 255, 0.85);
    }

    .tab-active {
      border-bottom: 3px solid #4f46e5;
      color: #4f46e5;
      font-weight: 600;
    }

    .input-focus:focus {
      box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.5);
    }

    .switch-user-type {
      transition: all 0.3s ease;
    }

    .switch-user-type.active {
      background-color: #4f46e5;
      color: white;
    }

    .airplane-bg {
      background-image: url('https://images.unsplash.com/photo-1436491865332-7a61a109cc05?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80');
      background-size: cover;
      background-position: center;
    }

    /* 新增的类用于改变 placeholder 颜色 */
    .placeholder-red::placeholder {
      color: red;
      opacity: 1; /* Firefox */
    }

  </style>
</head>
<body class="bg-gray-100 font-sans">
<div class="min-h-screen flex">
  <!-- 左侧背景图 -->
  <div class="hidden lg:block w-1/2 airplane-bg relative">
    <div class="absolute inset-0 bg-indigo-900 bg-opacity-60 flex items-center justify-center">
      <div class="text-white px-16">
        <h1 class="text-5xl font-bold mb-6">花龙腾航</h1>
        <p class="text-xl mb-8">探索世界，从花龙腾航开始</p>
        <div class="flex items-center">
          <div class="w-12 h-1 bg-indigo-400 mr-4"></div>
          <span class="text-indigo-300">您的旅程，我们的承诺</span>
        </div>
      </div>
    </div>
  </div>

  <!-- 右侧登录/注册区域 -->
  <div class="w-full lg:w-1/2 flex items-center justify-center p-8">
    <div class="w-full max-w-md">
      <!-- 品牌标志 -->
      <div class="flex items-center justify-center mb-10">
        <i class="fas fa-plane-departure text-4xl text-indigo-600 mr-3"></i>
        <h1 class="text-3xl font-bold text-indigo-800">花龙腾航</h1>
      </div>

      <!-- 用户类型切换 -->
      <div class="flex justify-center mb-8 bg-gray-100 rounded-full p-1">
        <button id="user-btn" class="switch-user-type active px-6 py-2 rounded-full focus:outline-none">
          <i class="fas fa-user mr-2"></i> 用户登录
        </button>
        <button id="admin-btn" class="switch-user-type px-6 py-2 rounded-full focus:outline-none">
          <i class="fas fa-user-shield mr-2"></i> 管理员
        </button>
      </div>

      <!-- 登录/注册切换标签 -->
      <div class="flex border-b mb-8">
        <button id="login-tab" class="flex-1 py-3 px-4 text-center font-medium focus:outline-none">
          <i class="fas fa-sign-in-alt mr-2"></i> 登录
        </button>
        <button id="register-tab" class="tab-active flex-1 py-3 px-4 text-center font-medium text-gray-500 focus:outline-none">
          <i class="fas fa-user-plus mr-2"></i> 注册
        </button>
      </div>

      <!-- 注册表单 -->
      <form method="post" action="user_register" onsubmit="return validateForm(event)">
        <div id="register-form" class="space-y-6">
          <div>
            <label for="register-username" class="block text-sm font-medium text-gray-700 mb-1">姓名 <span class="text-red-500">*</span></label>
            <div class="relative">
              <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                <i class="fas fa-user text-gray-400"></i>
              </div>
              <input type="text" id="register-username" class="input-focus w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md focus:outline-none" placeholder="请输入您的姓名" name="name" required>
            </div>
          </div>

          <div>
            <label for="register-account" class="block text-sm font-medium text-gray-700 mb-1">账号 <span class="text-red-500">*</span></label>
            <div class="relative">
              <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                <i class="fas fa-envelope text-gray-400"></i>
              </div>
              <input type="text" id="register-account" class="input-focus w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md focus:outline-none" th:attr="placeholder=${account_failure} ? '账号已存在！请重新输入' : '请输入您的账号', data-account-failure='${account_failure}' " name="account" required>
            </div>
          </div>
          <p th:if="${account_failure}" style="color: red; font-size: 0.9em; margin-top: 0.5em;">账号已存在！请重新输入</p>

          <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">证件类型 <span class="text-red-500">*</span></label>
            <label>
              <select name="ID_type" class="w-full p-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500" required="">
                <option value="身份证">身份证</option>
                <option value="护照">护照</option>
                <option value="港澳通行证">港澳通行证</option>
                <option value="台湾通行证">台胞证</option>
              </select>
            </label>
          </div>

          <div>
            <label for="register-ID-card" class="block text-sm font-medium text-gray-700 mb-1">证件号 <span class="text-red-500">*</span></label>
            <div class="relative">
              <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                <i class="fas fa-id-card text-gray-400"></i>
              </div>
              <input type="text" id="register-ID-card" class="input-focus w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md focus:outline-none" placeholder="请输入您的身份证号" name="ID_card" required>
            </div>
          </div>
          <p th:if="${IDcard_failure}" style="color: red; font-size: 0.9em; margin-top: 0.5em;">该证件号已注册！请查看是否输入错误</p>

          <div>
            <label for="register-phone" class="block text-sm font-medium text-gray-700 mb-1">手机号码 <span class="text-red-500">*</span></label>
            <div class="relative">
              <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                <i class="fas fa-phone text-gray-400"></i>
              </div>
              <input type="tel" id="register-phone" class="input-focus w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md focus:outline-none" placeholder="请输入手机号码" name="phone" required>
            </div>
          </div>
          <p th:if="${phone_failure}" style="color: red; font-size: 0.9em; margin-top: 0.5em;">该电话号码已注册！请查看是否输入错误</p>

          <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">出生日期 <span class="text-red-500">*</span></label>
            <label>
              <input type="date" name="birthday" class="w-full p-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500" required="">
            </label>
          </div>

          <div>
            <label for="register-password" class="block text-sm font-medium text-gray-700 mb-1">密码 <span class="text-red-500">*</span></label>
            <div class="relative">
              <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                <i class="fas fa-lock text-gray-400"></i>
              </div>
              <input type="password" id="register-password" class="input-focus w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md focus:outline-none" placeholder="请输入密码" name="password1" required>
            </div>
          </div>

          <div>
            <label for="register-confirm-password" class="block text-sm font-medium text-gray-700 mb-1">确认密码 <span class="text-red-500">*</span></label>
            <div class="relative">
              <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                <i class="fas fa-lock text-gray-400"></i>
              </div>
              <input type="password" id="register-confirm-password" class="input-focus w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md focus:outline-none" placeholder="请再次输入密码" name="password2" required>
            </div>
          </div>
          <p th:if="${password_failure}" style="color: red; font-size: 0.9em; margin-top: 0.5em;">密码不一致！请重新输入</p>

          <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">性别 <span class="text-red-500">*</span></label>
            <label>
              <select name="sex" class="w-full p-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500" required="">
                <option value="男">男</option>
                <option value="女">女</option>
              </select>
            </label>
          </div>

          <div class="flex items-center">
            <input id="terms" type="checkbox" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded">
            <label for="terms" class="ml-2 block text-sm text-gray-700">
              我已阅读并同意 <a href="public_user_agreement" class="text-indigo-600 hover:text-indigo-500">用户协议</a> 和 <a href="public_privacy_policy" class="text-indigo-600 hover:text-indigo-500">隐私政策</a>
            </label>
          </div>
          <p id="terms-error" class="text-red-500 text-sm mt-1 hidden">请勾选用户协议和隐私政策</p>

          <button type="submit" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
            <i class="fas fa-user-plus mr-2"></i> 注册
          </button>
        </div>
      </form>

    </div>
  </div>
</div>

<script>
  function validateForm(event) {
    const termsCheckbox = document.getElementById('terms');
    const errorText = document.getElementById('terms-error');

    if (!termsCheckbox.checked) {
      event.preventDefault(); // 阻止表单提交
      alert("请勾选并同意用户协议和隐私政策！");
      errorText.classList.remove('hidden'); // 显示提示文字
      return false;
    } else {
      errorText.classList.add('hidden'); // 隐藏提示文字
      return true;
    }
  }
</script>


<script>
  // 切换登录/注册标签
  document.getElementById('login-tab').addEventListener('click', function() {
    window.location.href = 'user_login';
  });

  document.getElementById('register-tab').addEventListener('click', function() {
    window.location.href = 'user_register';
  });

  // 切换用户/管理员模式
  document.getElementById('user-btn').addEventListener('click', function() {
    window.location.href = 'user_login';
  });

  document.getElementById('admin-btn').addEventListener('click', function() {
    window.location.href = 'manager_login';
  });

  // 密码显示/隐藏切换
  document.querySelectorAll('.fa-eye').forEach(icon => {
    icon.addEventListener('click', function() {
      const input = this.closest('.relative').querySelector('input');
      if (input.type === 'password') {
        input.type = 'text';
        this.classList.remove('fa-eye');
        this.classList.add('fa-eye-slash');
      } else {
        input.type = 'password';
        this.classList.remove('fa-eye-slash');
        this.classList.add('fa-eye');
      }
    });
  });
</script>

</body>
</html>